<template>
  <el-container class="app-container">
    <el-header class="app-header">
      <div class="logo">
        <el-icon size="24" style="color: white; margin-right: 8px">
          <House />
        </el-icon>
        <span>欢迎使用</span>
      </div>
      <!-- 用户信息区域 -->
      <div class="user-section">
        <el-dropdown @command="handleUserCommand" trigger="click">
          <div class="user-info">
            <el-avatar :src="userStore.userInfo.avatar" :size="32" style="margin-right: 8px">
              <el-icon><User /></el-icon>
            </el-avatar>
            <span class="username">{{ displayName }}</span>
            <el-icon class="dropdown-icon">
              <ArrowDown />
            </el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">
                <el-icon><User /></el-icon>
                个人信息
              </el-dropdown-item>
              <el-dropdown-item command="settings">
                <el-icon><Setting /></el-icon>
                系统设置
              </el-dropdown-item>
              <el-dropdown-item command="logout" divided>
                <el-icon><Close /></el-icon>
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <!-- 主体区域 -->
    <el-container class="main-container">
      <!-- 左侧边栏 -->
      <el-aside class="app-aside" :width="isCollapsed ? '64px' : '200px'">
        <el-menu
          :default-active="activeMenu"
          class="sidebar-menu"
          background-color="#f5f5f5"
          text-color="#333"
          active-text-color="#409eff"
          :collapse="isCollapsed"
          router
          :unique-opened="false"
        >
          <!-- 首页 -->
          <el-menu-item index="/dashboard">
            <el-icon>
              <House />
            </el-icon>
            <span>首页</span>
          </el-menu-item>

          <!-- 项目管理 - 二级菜单 -->
          <el-sub-menu index="project" class="sub-menu-item">
            <template #title>
              <el-icon>
                <Folder />
              </el-icon>
              <span>项目管理</span>
            </template>
            <el-menu-item index="/project/group" class="sub-menu-child">
              <el-icon>
                <User />
              </el-icon>
              <span>项目组管理</span>
            </el-menu-item>
            <el-menu-item index="/project/list" class="sub-menu-child">
              <el-icon>
                <Document />
              </el-icon>
              <span>项目列表</span>
            </el-menu-item>
            <el-menu-item index="/project/config" class="sub-menu-child">
              <el-icon>
                <Setting />
              </el-icon>
              <span>项目配置</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>

      <!-- 右侧主显示区域 -->
      <el-main class="app-main">
        <RouterView />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import api from '@/api'
import { useUserStore } from '@/stores/user'
import { Document, Folder, House, Setting, User } from '@element-plus/icons-vue'
import { ElIcon, ElMessage, ElMessageBox } from 'element-plus'
import { computed, onMounted, ref, watch } from 'vue'
import { RouterView, useRouter } from 'vue-router'

const router = useRouter()
const isCollapsed = ref(false)
const activeMenu = ref('/dashboard')
const userStore = useUserStore()

const displayName = computed(() => {
  const { nickname, username } = userStore.userInfo
  return nickname || username || '未知用户'
})

// 监听路由变化，更新激活菜单
watch(
  () => router.currentRoute.value.path,
  newPath => {
    activeMenu.value = newPath
  },
  { immediate: true }
)

onMounted(async () => {
  // 检查是否有 token
  const token = localStorage.getItem('token')
  if (!token) {
    // 如果没有 token，重定向到登录页面
    router.push({ name: 'login' })
    return
  }

  // 获取用户信息
  const success = await userStore.fetchUserInfo()
  if (!success) {
    ElMessage.error('获取用户信息失败，请重新登录')
    logout()
  }
})

const handleUserCommand = async command => {
  switch (command) {
    case 'profile':
      //router.push('/profile')
      try {
        await ElMessageBox.alert('个人信息功能尚未实现', '提示', {
          confirmButtonText: '确定',
          type: 'info'
        })
      } catch {
        // ignore user cancellation
      }

      break
    case 'settings':
      //router.push('/settings')
      try {
        await ElMessageBox.alert('系统设置功能尚未实现', '提示', {
          confirmButtonText: '确定',
          type: 'info'
        })
      } catch {
        // ignore user cancellation
      }
      break
    case 'logout':
      await confirmLogout()
      break
  }
}

const confirmLogout = async () => {
  try {
    await ElMessageBox.confirm('确定要退出登录吗？', '确认退出', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    await logout()
  } catch {
    // 用户取消退出
  }
}

const logout = async () => {
  try {
    await api?.logout()
  } finally {
    localStorage.removeItem('token')
    // 这里可以添加其他清理操作
    ElMessage.success('登出成功')
    // 重定向到登录页面
    router.push({ name: 'login' })
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
}

.app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background-color: #409eff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;

  .logo {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: white;

    span {
      margin-left: 8px;
    }
  }

  .el-button {
    background-color: transparent;
    border-color: white;
    color: white;

    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
      border-color: white;
      color: white;
    }
  }
}

.main-container {
  margin-top: 60px;
  height: calc(100vh - 60px);
}

.app-aside {
  background-color: #f5f5f5;
  border-right: 1px solid #e6e6e6;
  overflow-y: auto;
  transition: width 0.3s ease;

  .sidebar-menu {
    border: none;
    height: 100%;

    // 一级菜单项样式
    .el-menu-item {
      height: 56px;
      line-height: 56px;
      position: relative;
      transition: all 0.3s ease;

      .el-icon {
        margin-right: 8px;
      }

      // 选中状态的动画效果
      &.is-active {
        background-color: #ecf5ff !important;
        color: #409eff !important;
        border-right: 3px solid #409eff;

        // 添加滑入动画
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 3px;
          height: 100%;
          background-color: #409eff;
          animation: slideIn 0.3s ease;
        }
      }

      &:hover {
        background-color: #ecf5ff;
        color: #409eff;
        transform: translateX(5px);
      }
    }

    // 二级菜单容器样式
    .sub-menu-item {
      .el-sub-menu__title {
        height: 56px;
        line-height: 56px;
        transition: all 0.3s ease;

        .el-icon {
          margin-right: 8px;
        }

        &:hover {
          background-color: #ecf5ff;
          color: #409eff;
          transform: translateX(5px);
        }
      }

      // 二级菜单项样式
      .sub-menu-child {
        height: 48px;
        line-height: 48px;
        padding-left: 40px !important;
        background-color: #fafafa;
        position: relative;
        transition: all 0.3s ease;

        .el-icon {
          margin-right: 8px;
          font-size: 14px;
        }

        // 二级菜单选中状态
        &.is-active {
          background-color: #e6f7ff !important;
          color: #409eff !important;
          border-right: 3px solid #409eff;

          // 二级菜单选中动画
          &::before {
            content: '';
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            width: 6px;
            height: 6px;
            background-color: #409eff;
            border-radius: 50%;
            animation: pulse 1s infinite;
          }
        }

        &:hover {
          background-color: #e6f7ff;
          color: #409eff;
          transform: translateX(8px);
        }
      }
    }
  }
}

.app-main {
  padding: 20px;
  background-color: #ffffff;
  overflow-y: auto;
  height: 100%;
}

// 动画定义
@keyframes slideIn {
  from {
    height: 0;
  }

  to {
    height: 100%;
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }

  50% {
    opacity: 0.5;
    transform: translateY(-50%) scale(1.2);
  }
}

// 菜单折叠状态下的样式调整
.app-aside.is-collapsed {
  .sidebar-menu {
    .el-menu-item,
    .sub-menu-item .el-sub-menu__title {
      &:hover {
        transform: none;
      }
    }
  }
}
</style>
